<template>
  <div>
    <div class="search">
      <el-select v-model="searchCondition.username" placeholder="请选择用户" v-if="this.$store.state.currentUser.role === 'MANAGER'">
        <el-option
          v-for="user in users"
          :key="user.username"
          :label="user.username"
          :value="user.username"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="searchCondition.begin"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请输入开始日期"
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        v-model="searchCondition.end"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请输入结束日期"
      ></el-date-picker>
      <el-button type="primary" icon="el-icon-success" @click="handleStatistics"
        >统 计
      </el-button>
    </div>
    <el-card style="margin-bottom: 20px">
      <div slot="header">销售漏斗</div>
      <el-row :gutter="10">
        <el-col :span="16">
          <div id="funnel"></div>
        </el-col>
        <el-col :span="8" class="converse">
          <el-descriptions class="margin-top" :column="1" size="medium">
            <el-descriptions-item>
              <template slot="label"> 报备客户数 </template>
              {{ this.conversionRate.报备客户数 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 意向客户数 </template>
              {{ this.conversionRate.意向客户数 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 成交客户数 </template>
              {{ this.conversionRate.成交客户数 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 意向转化率 </template>
              {{ this.conversionRate.意向转化率 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 成交转化率 </template>
              {{ this.conversionRate.成交转化率 }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">折线图</div>
      <div id="line"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      //查询条件
      searchCondition: {
        username: this.$store.state.currentUser.username,
        begin: null,
        end: null,
      },
      //用户列表
      users: [],
      //查询到的统计结果
      funnel: [],
      conversionRate: {},
      dealTrend: [],
    };
  },
  computed: {
    funnelData() {
      return this.funnel.map((item) => {
        return {
          name: item.state,
          value: item.count,
        };
      });
    },
    dealTrendXAxisData(){
      return this.dealTrend.map((item) => item.YM);
    },
    dealTrendYAxisData(){
      return this.dealTrend.map((item) => item.count);
    },
  },
  created() {
    this.axios
      .get("/user/userlist")
      .then((resp) => {
        this.users = resp.data;
      })
      .catch(() => {
        this.$message.error("未成功导入用户姓名");
      });
  },
  methods: {
    handleStatistics() {
      this.dataSearch();
      this.converse();
      this.trend();
    },
    dataSearch() {
      //向后端申请统计结果数据
      this.axios
        .get("/statistics/funnel", { params: this.searchCondition })
        .then((resp) => {
          this.funnel = resp.data;
          if (this.funnel.length === 0) {
            this.$message.warning("无数据！");
          }
          //制作漏斗图
          var chartDom = document.getElementById("funnel");
          var myChart = echarts.init(chartDom);
          if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();
            myChart = echarts.init(chartDom);
          }
          var option;
          option = {
            title: {
              text: "客户状态",
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c}",
            },
            toolbox: {
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {},
              },
            },
            legend: {
              data: this.funnelData.value,
            },
            series: [
              {
                name: "客户状态",
                type: "funnel",
                left: "10%",
                top: 60,
                bottom: 20,
                width: "80%",
                min: 0,
                max: 100,
                minSize: "0%",
                maxSize: "100%",
                sort: "descending",
                gap: 2,
                label: {
                  show: true,
                  position: "inside",
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: "solid",
                  },
                },
                itemStyle: {
                  borderColor: "#fff",
                  borderWidth: 1,
                },
                emphasis: {
                  label: {
                    fontSize: 20,
                  },
                },
                data: this.funnelData,
              },
            ],
          };
          option && myChart.setOption(option);
        });
    },
    converse() {
      this.axios
        .get("/statistics/conversion", { params: this.searchCondition })
        .then((resp) => {
          this.conversionRate = resp.data;
        });
    },
    trend() {
      this.axios
        .get("/statistics/dealTrend", { params: this.searchCondition })
        .then((resp) => {
          this.dealTrend = resp.data;
          console.log(this.dealTrend);
          console.log(this.dealTrendXAxisData);
          console.log(this.dealTrendYAxisData);
          //画折线图
          var chartDom = document.getElementById("line");
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            xAxis: {
              type: "category",
              data: this.dealTrendXAxisData,
            },
            yAxis: {
              type: "value",
            },
            tooltip: {
              trigger: "axis",
            },
            series: [
              {
                data: this.dealTrendYAxisData,
                type: "line",
                left: "10%",
                top: 60,
                bottom: 20,
                width: "80%",
              },
            ],
          };

          option && myChart.setOption(option);
        });
    },
  },
};
</script>

<style scoped>
.search {
  display: flex;
  align-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}
#funnel {
  width: 100%;
  height: 250px;
}
.converse {
  left: 20%;
  top: 20px;
  font-size: 400px;
}
#line {
  width: 100%;
  height: 350px;
}
</style>
